import Example from '@/components/Example';

# Examples

These examples can provide inspiration for your project, showcasing different setup scenarios.

<div className="mt-16 flex flex-col gap-16">

<Example
  image="/example-app-router.png"
  name="App Router with locale-based routing"
  id="app-router"
  description="Showcases basic usage of next-intl with the App Router, including internationalized routing. This can be a good starting point for public sites where SEO is relevant."
  demoLink="https://next-intl-example-app-router.vercel.app"
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-app-router"
/>

<Example
  image="/example-app-router-without-i18n-routing.png"
  name="App Router without locale-based routing"
  id="app-router-without-i18n-routing"
  description="Demonstrates usage of next-intl without locale-based routing, a typical setup for apps behind an auth layer. The app manages the locale via a cookie that can be updated via a Server Action."
  demoLink="https://next-intl-example-app-router-without-i18n-routing.vercel.app"
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-app-router-without-i18n-routing"
/>

<Example
  image="/example-app-router-mixed-routing.png"
  name="App Router mixed routing"
  id="app-router-mixed-routing"
  description="Uses locale prefixes on public routes while reading the locale from user settings on pages for logged in users."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-app-router-mixed-routing"
/>

<Example
  image="/example-street-photography.png"
  name="Street photography viewer"
  id="street-photography-viewer"
  description="Handles i18n exclusively in Server Components, while adding interactivity with Client Components."
  demoLink="https://street-photography-viewer.vercel.app/"
  sourceLink="https://github.com/amannn/street-photography-viewer"
/>

<Example
  name="App Router with message extraction"
  id="app-router-extracted"
  description="Showcases an app with message extraction set up."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-app-router-extracted"
/>

<Example
  name="App Router with single locale"
  id="app-router-single-locale"
  description="Uses next-intl in an App Router setup with a single, static locale."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-app-router-single-locale"
/>

<Example
  name="App Router migration"
  id="app-router-migration"
  description="An example that showcases a basic installation of next-intl in a Next.js app that uses both the Pages as well as the App Router."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-app-router-migration"
/>

<Example
  name="App Router with NextAuth.js"
  id="app-router-next-auth"
  description="An example that showcases the usage of next-intl together with NextAuth.js and the App Router."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-app-router-next-auth"
/>

<Example
  name="Pages Router"
  id="pages-router"
  description="An example that showcases a basic installation of next-intl with the Pages Router."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-pages-router"
/>

<Example
  name="Pages Router (advanced)"
  id="pages-router-advanced"
  description="An example that showcases more advanced features of next-intl with the Pages Router."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-pages-router-advanced"
/>

<Example
  name="React (without Next.js)"
  id="use-intl"
  description="An example that showcases the usage of use-intl, the base library of next-intl, in a regular React app."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-use-intl"
/>

<Example
  name="React Native"
  id="react-native"
  description="An example that showcases how use-intl, the base library of next-intl, can be used with React Native."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-react-native"
/>

<Example
  name="Remix"
  id="remix"
  description="An example that showcases how use-intl, the base library of next-intl, can be used with Remix."
  sourceLink="https://github.com/amannn/next-intl/tree/main/examples/example-remix"
/>

</div>
